<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国图书网</title>
    <link rel="stylesheet" href="５，字体图标/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
            
        }
        #box{
            width: 950px;
            height: 1000px;
            margin: 0 auto;
        }
        #head{
            width: 100%;
            height: 100px;
            /*background-color: yellowgreen;*/
            padding-top: 28px;
            padding-left: 8px;
            display: flex;
            justify-content: space-between;
            
            
        }
        #logo{
            width: 175px;
            height: 50px;
            padding-top: 8px;
        }
        #pic{
            width: 100%;
        }
        #link{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            flex-grow: 1;
            margin-left: 50px;
        }
        #line{
            width: 100%;
            height: 3px;
            background-color: #ffcc66;
            box-shadow: 0 0.05px 0.2px 0.5px yellow;
        }
        .wel a{
            color: black;
            text-decoration: none;
            margin: 0 4px;
            font-family: 微软雅黑;
            font-size: 13px;
        }
        #blue1,#blue2{
            color: blue;
        }
        #blue1:hover,#blue2:hover{
            color: red;
        }


        .wel a:hover{
            color: red;
            text-decoration: underline;
        }
        #user{
            width: 600px;
            height: 360px;
            margin: 60px auto;
            border: 1px solid #e4efff;
        }
        #yong{
            width: 100%;
            height: 42px;
            border-bottom: 1px solid #eaeaea;
            padding-left: 35px;
            background-color: #f9fcff;
            font-size: 20px;
            font-family: 黑体;
            color: #cc3333;
            padding-top: 10px;
            margin-bottom: 25px;
        }
        .name::after{
            content: "：";
            font-size: 10px;
        }
        .hu{
            width: 100%;
            height: 40px;
            display: flex;
            align-content: center;
            /*vertical-align: middle;*/

        }
        
        .name{
            
            font-size: 14px;
            color: #666666;
            width: 230px;
            text-align: right;
            vertical-align: middle;
        }

        .juz{
            width: 206px;
            height: 26px;
            border: 1px solid #666666;
            /*margin: 0 auto;*/
        }
        .forget{
            margin-left: 13px;
            color: #3366cc;
            text-decoration: none;
            font-size: 13px;
            margin-top: 3px;
        }
        .forget:hover,#yuke a:hover{
            color: #f37114;
            text-decoration: underline;
        }
        #aspx{
            width: 206px;
            height: 100%;
        }
        #see{
            margin-left: 13px;
            color: #666666;
            font-size: 13px;
            margin-top: 10px;
            
        }
        #huan{
            margin-top: 10px;
        }
        #deng{
            margin-top: 15px;
            height: 90%;
            width: 100px;
            font-size: 20px;
            font-weight: bolder;
            background-color: #ff6600;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            
        }
        #deng a{
            color:#ffffff;
            text-decoration: none;
        }
        #zhu{
            margin: 30px 25px 0px;
            color: #ff6600;
            text-decoration: none;
        }
        #zhu:hover{
            text-decoration: underline;
        }
        #zhang{
            padding-top: 10px;
            border-top: 1px  #cccccc dotted;
            margin: 40px auto;
            width: 90%;
            height: 30px;
            display: flex;
            justify-content: center;

            /*align-items: center;*/
        }
        #zhang a{
            color: black;
            text-decoration: none;
        }
        #weibo,#qq{
            color: red;
            font-size: 22px;
            margin: -3px 3px;
        }
        .small{
            font-size: 14px;
        }
        #qq{
            margin-left: 50px;
        }
        #recommend{
            width: 100%;
            height: 250px;
            border: 1px solid #eaeaea;
        }
        #our{
            width: 100%;
            border-bottom: 1px solid #e4efff;
            background-color: #f9fcff;
            font-weight: bold;
            font-size: 12px;
            color: #373737;
            padding: 6px 0 5px 30px;
        }
        #jian{
            display: flex;
            width: 100%;
            height: 221px;
        }
        #jian>a{
            line-height: 190px;
        }
        #books{
            display: flex;
            width: 97%;
            height: 100%;
            justify-content: center;
        }
        .book{
            width: 25%;
            height: 201px;
            margin-top: 20px;
            position: relative;
        }
        .book a{
            display: block;
            text-decoration: none;
        }
        .tup1{
            width: 58%;
            height: 60%;
            background-image: url(0.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
        }
        .tup2{
            width: 58%;
            height: 60%;
            background-image: url(1.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
        }
        .tup3{
            width: 58%;
            height: 60%;
            background-image: url(2.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
        }
        .tup4{
            width: 58%;
            height: 60%;
            background-image: url(3.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
        }
        .tup5{
            width: 58%;
            height: 60%;
            background-image: url(4.jpg);
            background-size: 100% 100%;
            margin: 0 auto;
        }
        .tup1:hover,.tup2:hover,.tup3:hover,.tup4:hover,.tup5:hover{
            transform: translateY(-5px);
        }
        .title{
            text-align: center;
            width: 100%;
            font-size: 14px;
            color: black;
        }
        .title:hover{
            color: red;
            text-decoration: underline;
        }
        .money{
            position: absolute;
            bottom: 15px;
            right: 18px;
        }
        .black{
            font-size: 12px;
            color: black;
            letter-spacing: 2px;
        }
        .red{
            font-size: 12px;
            color: red;
            font-weight: bold;
            letter-spacing: 2px;
        }
        #yuke,#brand{
            width: 100%;
            font-size: 12px;
            text-align: center;
            margin:10px 0px;
        }
        #yuke a{
            color: black;
            text-decoration: none;
            margin: 0 8px;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <div id="head">
            <div id="logo">
                <img id="pic" src="logo.jpg" alt="">
            </div>
            <div id="link">
                <div class="wel">欢迎光临中国图书网，请<a id="blue1" href="">登陆</a></div>
                <div class="wel">
                    <a id="blue2" href="http://www.bookschina.com/RegUser/Register.aspx">免费注册</a>
                    |
                    <a href="http://www.bookschina.com/shopcar/shoppingcart.aspx">购物车(0)</a>
                    |
                    <a href="">收藏夹</a>
                    |
                    <a href="">我的订单</a>
                    |
                    <a href="">我的账户</a>
                    |
                    <a href="">书馨卡</a>
                    |
                    <a href="">优惠券</a>
                    |
                    <a href="http://www.bookschina.com/question/default1.asp">帮助</a>
                    
                </div>
            </div>
        </div>
        <div id="line"></div>
        <div id="user">
            <div id="yong">用户登录</div>
            <div class="hu">
                <div class="name">用户名</div>
                <input class="juz" type="text">
            </div>
            <div class="hu">
                <div class="name">密码</div>
                <input class="juz" type="text">
                <a class="forget" href="http://www.bookschina.com/RegUser/forgetpwd.aspx">忘记密码？</a>
            </div>
            <div class="hu">
                <div class="name">请输入验证码</div>
                <input class="juz" type="text">
            </div>
            <div class="hu">
                <div class="name"></div>
                <img id="aspx" src="aspx.jpg" alt="">
                <p  id="see">看不清？</p>
                <a class="forget" id="huan" href="">换张图</a>
            </div>
            <div class="hu">
                <div class="name"></div>
                <div id="deng"><a href="http://www.bookschina.com/RegUser/Register.aspx?url=%2fvieworder%2fdefault.aspx">登录</a></div>
                
                <a id="zhu" href="http://www.bookschina.com/RegUser/Register.aspx?url=%2fvieworder%2fdefault.aspx">新用户注册>></a>
            </div>
            <div id="zhang">
                <a id="weibo" class="fa fa-weibo" href="http://api.t.sina.com.cn/oauth/authorize?oauth_token=e4285ab3d2dd85994720e502b080b784&oauth_callback=http://www.bookschina.com:80/REGUSER/tsina.aspx">
                    <a class="small" href="">新浪微博账户登录</a>
                </a>
                <a id="qq" class="fa fa-qq" href="https://graph.qq.com/oauth/show?which=Login&display=pc&response_type=code&client_id=100286515&redirect_uri=http://qq.bookschina.com/&state=2346278f5c95481684cf7b44ba041f5a&scope=get_user_info">
                    <a class="small" href="">QQ账户登录</a>
                </a>
            </div>
        </div>
        <div id="recommend">
            <div id="our">我们为你推荐</div>
            <div id="jian">
                <a href=""><img src="left.jpg" alt=""></a>
                <div id="books">
                    <div class="book">
                        <a class="tup1" href="http://www.bookschina.com/1382430.htm"></a>
                        <a class="title" href="http://www.bookschina.com/1382430.htm">完美保存</a>
                        <div class="money">
                            <span class="black">￥29.8</span>
                            <span class="red">￥9.5</span>
                        </div>  
                    </div>
                    <div class="book">
                        <a class="tup2" href="http://www.bookschina.com/4490545.htm"></a>
                        <a class="title" href="http://www.bookschina.com/4490545.htm">中国古代生活丛书--中国古代的恶霸</a>
                        <div class="money">
                            <span class="black">￥12.5</span>
                            <span class="red">￥5.1</span>
                        </div>
                    </div>
                    <div class="book">
                        <a class="tup3" href="http://www.bookschina.com/5040837.htm"></a>
                        <a class="title" href="http://www.bookschina.com/5040837.htm">黄叶村曹雪芹纪念馆</a>
                        <div class="money">
                            <span class="black">￥19.8</span>
                            <span class="red">￥6.3</span>
                        </div>
                    </div>
                    <div class="book">
                        <a class="tup4" href="http://www.bookschina.com/5182902.htm"></a>
                        <a class="title" href="http://www.bookschina.com/5182902.htm">浪漫主义时代的政治观念-它们的兴起及其对现代思想的影响</a>
                        <div class="money">
                            <span class="black">￥36.0</span>
                            <span class="red">￥12.6</span>
                        </div>
                    </div>
                    <div class="book">
                        <a class="tup5" href="http://www.bookschina.com/5548113.htm"></a>
                        <a class="title" href="http://www.bookschina.com/5548113.htm">人生这道难题-培根随笔</a>
                        <div class="money">
                            <span class="black">￥29.8</span>
                            <span class="red">￥13.4</span>
                        </div>
                    </div>
                    
                </div>
                <a href=""><img src="right.jpg" alt=""></a>
            </div>
            
            
        </div>
        <div id="yuke">
            <a href="http://www.miibeian.gov.cn/state/outPortal/loginPortal.action;jsessionid=j4c6ddjV4Cfw7CvmaIuE-KlE1O4LEg5Xxl-urI1BK9LH56gk1AI8!875948003">经营许可证编号：京ICP备07017600号</a>
            <a href="http://www.bookschina.com/include/type2.asp">京信市监发[2002]122号 </a>
            <span>海淀公安分局备案编号：1101083394</span>
        </div>
        <div id="brand">
            <a href="http://www.ectrustprc.org.cn/seal/splash/1000006.htm"><img src="t.gif" alt=""></a>
            <a href="http://www.hd315.gov.cn/beian/view.asp?bianhao=010202002042800018"><img src="i.gif" alt=""></a>
        </div>
    </div>
</body>
</html>